<!-- 项目申报审核 -->
<template>
  <div class="review_page">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      active-text-color="#0b847b"
      text-color="#333333"
      :default-active="activeIndex"
      @select="handleSelect"
    >
      <el-menu-item index="1">自立项目</el-menu-item>
      <el-menu-item index="2">横向项目</el-menu-item>
      <el-menu-item index="3">纵向项目</el-menu-item>
      <div class="search">
        <el-input
          placeholder="请输入名称"
          v-model="params.projectName"
          clearable
        />
        <el-button type="primary" @click="searchBtn">搜索</el-button>
      </div>
    </el-menu>

    <component
      :is="componentName"
      :listLoading="listLoading"
      :projectlistArr="projectlistArr"
      :current="current"
      :isKeGuan="isKeGuan"
      :isReview="true"
    ></component>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      @pagination="getExamineList"
    />
  </div>
</template>

<script>
import ZiLiTable from "../../projectManagement/approval/selfProject/listTable.vue"; // 自立项目的table
import OtherTable from "../../projectManagement/approval/outsideProject/listTable.vue"; // 其他项目的table

import { apiExamineList } from "@/api2/projectManagement/examine";

export default {
  components: {
    ZiLiTable,
    OtherTable,
  },
  data() {
    return {
      total: 0,
      activeIndex: sessionStorage.getItem("activeIndex") ?? "1",
      componentName: "",
      listLoading: false,
      projectlistArr: [], //项目列表
      current: 0,  // 草稿还是列表
      isKeGuan: false,
      params: {
        pageNum: 1,
        pageSize: 10,
        projectCategory: sessionStorage.getItem("activeIndex") ?? 1,
        projectName: "",
      },
    };
  },
  mounted() {
    this.getExamineList();
    this.isKeGuan =
      JSON.parse(sessionStorage.getItem("loginUserinfo")).name == "科研管理员";
  },
  methods: {
    // 搜索
    searchBtn() {
      this.params.projectName = this.params.projectName.trim();
      this.getExamineList();
    },

    // 点击nav
    handleSelect(e) {
      this.params.projectName = "";
      this.params.projectCategory = e;
      this.activeIndex = e;
      sessionStorage.setItem("activeIndex", e);
      sessionStorage.setItem("itemKey", e);
      this.$store.commit("project/SAVE_KEY", e);
      this.getExamineList();

      if (e == 1) {
        this.componentName = "ZiLiTable";
      } else if (e == 2 || e == 3) {
        this.componentName = "OtherTable";
      }
    },

    getExamineList() {
      console.log(this.activeIndex);
      let typeName = ''
      if (this.activeIndex == 1) {
        this.componentName = "ZiLiTable";
        typeName='自立项目'
      } else if (this.activeIndex == 2) {
        this.componentName = "OtherTable";
        typeName='横向项目'
      } else {
        this.componentName = "OtherTable";
        typeName='纵向项目'
      }
      this.$store.dispatch("project/setTypeNameFun", typeName);
      sessionStorage.setItem("typeName", typeName);
      this.listLoading = true;
      apiExamineList(this.params)
        .then((res) => {
          this.listLoading = false;
          this.projectlistArr = res.data;
          this.total = res.total;
        })
        .catch((err) => {
          this.listLoading = false;
          console.log(err);
        });
    },

    // 查看通知详情
    getNotifyDetails(id) {
      apiNotifyDetails(id);
    },
  },
};
</script>

<style lang="scss" scoped>
.review_page {
  height: 100%;
  background: #f4f5fc;
  padding: 1.25rem;
}

.el-menu-demo {
  width: 100%;
  position: relative;
  .search {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    margin-right: 10px;
    .el-input {
      margin-right: 10px;
    }
  }
}

.isClick {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #e86565;
  display: inline-block;
}
</style>
